<template>
  <div id='titles'>
    <slot>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'titles',
}
</script>

<style lang='less'>
#titles {
  display: flex;
  width: 100%;
  height: 100%;
  .img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .imginfo {
      width: 40%;
      height: 60%;
      border-radius: 50%;
      background: url('/image/b08baaf5f2db228cf97ce3c5906d169f_121_121.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }
  .info {
    flex: 4.5;
    display: flex;
    align-items: center;
    .infobox {
      flex: 1;
      color: #fff;
      h2 {
        margin-bottom: 8px;
      }
      h4 {
        font-weight: 500;
      }
    }
  }
}
</style>